<template>
	<view class="container">
		<view class="content">
			<u-loading-page :loading="isLoading" loading-text="加载中......" loading-mode="semicircle"></u-loading-page>
			<!-- 聊天消息列表 -->
			<scroll-view class="message-list" scroll-y :scroll-into-view="'message-' + scrollToIndex"
				:scroll-with-animation="true" @scrolltolower="loadMore">
				<view v-for="(item, index) in messageList" :key="index" :id="'message-' + index" class="message-item"
					:class="[item.isMe ? 'right' : 'left']">
					<!-- 头像 -->
					<image class="avatar" :src="item.avatar" mode="aspectFill" />

					<!-- 消息内容 -->
					<view class="message-content">
						<!-- 用户名 -->
						<text class="username">{{item.username}}</text>

						<!-- 消息气泡 -->
						<view class="bubble">
							<text>{{item.content}}</text>
						</view>

						<!-- 时间戳 -->
						<!-- <text class="time">{{formatTime(item.time)}}</text> -->
					</view>
				</view>
			</scroll-view>

			<!-- 底部输入框 -->
			<view class="footer-button">
				<u-input v-model="inputMessage" placeholder="请输入您想咨询的内容" border="none" shape="circle"
					confirm-type="send" @confirm="saveAnswer">
				</u-input>
				<text @click="saveAnswer">发送</text>
				<!-- <u-button type="primary" size="mini" @click="sendMessage" :disabled="!inputMessage">发送</u-button> -->
			</view>
		</view>
	</view>
</template>

<script>
	import {
		saveInfo,
		listInfo
	} from '../../api/customer-service'
	export default {
		data() {
			return {
				messageList: [],
				inputMessage: '',
				scrollToIndex: 0,
				isLoading: false
			}
		},
		onLoad() {
			this.getList()
		},
		methods: {
			async getList() {
				this.isLoading = true
				const res = await listInfo();
				if (res.code === 200) {
					this.messageList = res.rows;
					if (this.messageList.length > 0) {
						this.messageList.forEach(item => {
							if (item.type == '1') {
								item.isMe = true
								item.avatar = "https://www.taotaohomecraft.press/prod-api/profile/person.png"
							} else {
								item.avatar = "https://www.taotaohomecraft.press/prod-api/profile/tao_logo.jpg"
								item.isMe = false
							}
						})
					}
					this.isLoading = false
				}
			},
			sendMessage() {
				const newMessage = {
					id: Date.now(),
					username: '我',
					avatar: "https://www.taotaohomecraft.press/prod-api/profile/person.png",
					content: this.inputMessage,
					// time: new Date().toLocaleString(),
					isMe: true
				}
				this.messageList.push(newMessage)
				this.inputMessage = ''
				this.scrollToBottom()
			},
			async saveAnswer() {
				if (!this.inputMessage.trim()) return
				const data = {
					type: '1',
					answer: this.inputMessage,
					isAnswer: 0
				}
				const res = await saveInfo(data);
				if (res.code == 200) {
					this.sendMessage()
				}
			},
			scrollToBottom() {
				this.$nextTick(() => {
					this.scrollToIndex = this.messageList.length - 1
				})
			},
			formatTime(time) {
				return time.split(' ')[1].substr(0, 5)
			},
			loadMore() {
				// 加载更多历史消息
				console.log('加载更多...')
			},
			sendEmoji() {
				this.inputMessage += '👍'
			}
		}
	}
</script>

<style lang="less">
	.container {
		position: relative;
		height: 100vh;
		width: 100%;
		background-color: #f6f6f6;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.content {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.message-list {
		width: 100%;
		flex: 1;
		padding: 20rpx;
		box-sizing: border-box;
		overflow: auto;
	}

	.message-item {
		display: flex;
		margin-bottom: 30rpx;

		&.left {
			flex-direction: row;
		}

		&.right {
			flex-direction: row-reverse;
		}
	}

	.avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		margin: 0 20rpx;
	}

	.message-content {
		max-width: 60%;
		display: flex;
		flex-direction: column;

		.username {
			font-size: 24rpx;
			color: #999;
			margin-bottom: 10rpx;
		}

		.bubble {
			padding: 15rpx 20rpx;
			border-radius: 10rpx;
			background-color: #fff;
			position: relative;

			&::after {
				content: '';
				position: absolute;
				top: 15rpx;
				width: 0;
				height: 0;
				border: 10rpx solid transparent;
			}
		}

		.time {
			font-size: 20rpx;
			color: #999;
			margin-top: 10rpx;
			text-align: right;
		}
	}

	.left .message-content {
		align-items: flex-start;

		.bubble {
			background-color: #fff;

			&::after {
				left: -20rpx;
				border-right-color: #fff;
			}
		}
	}

	.right .message-content {
		align-items: flex-end;

		.bubble {
			background-color: #95ec69;

			&::after {
				right: -20rpx;
				border-left-color: #95ec69;
			}
		}
	}

	.footer-button {
		display: flex;
		align-items: center;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: #fff;
		padding: 30rpx;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);

		.u-input {
			flex: 1;
			margin-right: 20rpx;
		}
	}
</style>